<template>
    <div class="soil-info">
        <p style="color: white">{{sensor.value}}</p>
        <p style="color: white"> mg/kg </p>
        <p style="color: white">良</p>
    </div>
    <div class="sensor-type">
        <dv-border-box-12 class="border-size">
            <p style="margin: 1vh;color: white">{{sensor.sensor_type}}</p>
        </dv-border-box-12>
    </div>
</template>

<script setup lang="ts">
import {onMounted, reactive} from "vue";
import axios from "@/Api/axiosInterceptor.ts";
import {headerConfig} from "@/Api/HeaderConfig.ts";
import {UPDATE_TIME} from "@/utils/UpdateTime.ts";
const props = defineProps(['device_id'])

interface SensorItem {
    sensor_type: string,
    value: number
}
let sensor = reactive<SensorItem>({
    sensor_type: "",
    value: 0,
})
onMounted(()=>{
  fetchData();
  setInterval(fetchData, UPDATE_TIME);
})
function fetchData(){
    axios.get(`http://localhost:8080/api/sensor-datas/device/${props.device_id}/`, headerConfig).then((response) => {
        Object.assign(sensor, response.data);
    }).catch((error) => {
        console.log(error);
    })
}

</script>

<style scoped>
.soil-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.soil-info p{
    margin: 0;
}
.sensor-type{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 1vh;
}

.border-size {
    width: 8vw;
    height: 4vh;
}
</style>